<template>
    <div class="bk-form bk-form-vertical">
        <form-field
            v-for="(obj, key) in commonModel[&quot;row&quot;]"
            :key="key"
            :desc="obj.desc"
            :desc-link="obj.descLink"
            :desc-link-text="obj.descLinkText"
            :required="obj.required"
            :label="obj.label"
            :is-error="errors.has(key)"
            :error-msg="errors.first(key)"
        >
            <component
                :is="obj.component"
                :container="container"
                :element="element"
                :name="key"
                v-validate.initial="Object.assign({}, { max: getMaxLengthByType(obj.component) }, obj.rule, { required: !!obj.required })"
                :handle-change="handleUpdateElement"
                :value="element[key]"
                v-bind="obj"
            ></component>
        </form-field>

        <accordion
            show-checkbox
            :show-content="isShowEmailNotice"
            :after-toggle="toggleEmailNotice"
            :condition="true"
        >
            <header
                class="var-header"
                slot="header"
            >
                <span>{{ $t('editPage.enableMailNotice') }}</span>
                <input
                    class="accordion-checkbox"
                    type="checkbox"
                    :checked="element.enableEmail"
                    style="margin-left: auto;"
                />
            </header>
            <div slot="content">
                <form-field
                    v-for="key in optionalModel"
                    v-if="!newModel[key].hidden"
                    :key="key"
                    :desc="newModel[key].desc"
                    :required="newModel[key].required"
                    :label="newModel[key].label"
                    :is-error="errors.has(key)"
                    :error-msg="errors.first(key)"
                >
                    <component
                        :is="newModel[key].component"
                        v-validate.initial="Object.assign({}, { max: getMaxLengthByType(newModel[key].type) }, newModel[key].rule, { required: newModel[key].required })"
                        :lang="lang"
                        :name="key"
                        :handle-change="handleUpdateElement"
                        :value="element[key]"
                        v-bind="newModel[key]"
                    ></component>
                </form-field>
            </div>
        </accordion>
    </div>
</template>

<script>
    import atomMixin from './atomMixin'
    import validMixins from '../validMixins'

    export default {
        name: 'normal-atom',
        mixins: [atomMixin, validMixins],
        data () {
            return {
                isShowEmailNotice: false,
                optionalModel: ['emailReceivers', 'emailTitle']
            }
        },
        computed: {
            commonModel () {
                if (this.element['@type'] === 'reportArchiveService') {
                    const { nodeId, fileDir, indexFile, reportName } = this.newModel
                    return {
                        row: { nodeId, fileDir, indexFile, reportName }
                    }
                } else {
                    const { fileDir, indexFile, reportName } = this.newModel
                    return {
                        row: { fileDir, indexFile, reportName }
                    }
                }
            }
        },
        created () {
            this.newModel = JSON.parse(JSON.stringify(this.atomPropsModel))
            if (this.element.enableEmail) {
                this.isShowEmailNotice = true
            } else {
                this.handleUpdateElement('enableEmail', false)
                this.handleUpdateElement('emailReceivers', [])
                this.handleUpdateElement('emailTitle', '【${pipeline.name}】  #${pipeline.build.num}' + this.$t('editPage.archived'))
            }
        },
        methods: {
            toggleEmailNotice (element, show) {
                if (show) {
                    this.handleUpdateElement('enableEmail', true)
                    this.isShowEmailNotice = true
                } else {
                    this.handleUpdateElement('enableEmail', false)
                    this.isShowEmailNotice = false
                }
            }
        }
    }
</script>
